<template>
  <view class="page" v-cloak>
    <!-- 自定义头部start -->
    <view class="cu-custom">
      <view class="cu-bar fixed" :style="[{ height: CustomBar + 'px', paddingTop: StatusBar + 'px', backgroundColor: 'rgba(255,255,255,' + scrollTop / 100 + ')' }]">
        <view class="action" @tap="back"><text class="cuIcon-back"></text></view>
        <view class="content" :style="[{ top: StatusBar + 'px' }]" v-if="scrollTop > CustomBar">{{i18n['商品详情']}}</view>
      </view>
    </view>
    <!-- 自定义头部end -->
    <!-- 轮播图start -->
    <view id="banners" class="banners">
      <swiper class="carousel" :indicator-dots="false" :circular="true" @change="changeSwiper">
        <block v-for="(item, index) in swipers" :key="index">
          <swiper-item>
            <view class="image"  @click="preview(item, swipers)">
				<fu-image :src="item" mode="aspectFill"></fu-image>
			</view>
          </swiper-item>
        </block>
      </swiper>
      <view class="pagination">{{ curSwiper }}/{{ swipers.length }}</view>
    </view>
    <!-- 轮播图end -->
    <!-- 悬浮Tab栏 -->
    <view class="tabs" v-if="scrollTop > CustomBar" :style="{ opacity: opacity, top: CustomBar + 'px' }">
      <block v-for="item in tabs" :key="item.title">
        <view class="flex-sub flex justify-center align-center" @tap="changeTab(item)">
          <view class="tab-item" :class="{ active: curTab == item.id }">{{ item.title }}</view>
        </view>
      </block>
    </view>
    <!-- 价格展示区start -->
    <view class="prices">
      <view class="box">
        <view class="top text-white flex justify-between align-center">
          <text>
            <text>
              <text class="text-price text-lg"></text>
              <text class="text-xxl">{{ minPrice }}</text>
            </text>
            <text class="margin-lr-xs">~</text>
            <text>
              <text class="text-price text-lg"></text>
              <text class="text-xxl">{{ maxPrice }}</text>
            </text>
          </text>
          <text class="margin-left-sm sale-box">
            <text class="text-sm">{{i18n['总销量']}}</text>
            <text class="text-sm">{{ goodsInfo.sales_sum }}</text>
            <text class="text-sm">{{i18n['件']}}</text>
          </text>
        </view>
      </view>
    </view>
    <!-- 价格展示区end -->
    <!-- 商品信息展示区start -->
    <view class="infos padding bg-white">
      <view class="flex justify-between align-center">
        <text class="text-lg text-333 word-break-all  text-bold">
          <block v-if="goodsInfo.goods_label && goodsInfo.goods_label.length > 0">
            <text class="sale-mark" v-for="(item, index) in goodsInfo.goods_label" :key="index">{{ item }}</text>
          </block>
          {{ goodsInfo.name }}
        </text>
        <view class="margin-left flex flex-direction align-center justify-center" style="width: 80rpx; min-width: 80rpx" @tap="collect">
          <text v-if="goodsInfo.is_collect" class="cuIcon-likefill fu-cred" style="font-size: 34rpx"></text>
          <text v-else class="cuIcon-like" style="font-size: 34rpx"></text>
          <text class="text-sm text-333" :class="{ 'fu-cred': goodsInfo.is_collect }">{{ goodsInfo.is_collect ? i18n['已收藏'] : i18n['收藏'] }}</text>
        </view>
      </view>
    </view>
    <!-- 商品信息展示区end -->
    <!-- 规格,地址,服务,参数start -->
    <view class="margin-top-xs bg-white padding-lr">
      <!-- 地址start -->
      <view class="list-item" @tap="switchAddress" v-if="curAddr">
        <view class="title">{{i18n['送至']}}</view>
        <view class="content solid-bottom">
          <view class="mes text-df text-333 text-cut">
            <text class="cuIcon-locationfill fu-cred"></text>
            <text class="margin-left-xs">{{ curAddr.province }}{{ curAddr.city }}{{ curAddr.district }}{{ curAddr.address }}</text>
          </view>
          <view class="icon"><text class="cuIcon-right text-999" style="font-size: 24rpx"></text></view>
        </view>
      </view>
      <!-- 地址end -->
      <!-- 优惠start -->
      <view class="list-item" @tap="switchFreight">
        <view class="title">{{i18n['运费']}}</view>
        <view class="content solid-bottom">
          <text class="text-sm text-333"></text>
          <view>
            <text class="text-sm text-333">{{i18n['运费说明']}}</text>
            <text class="cuIcon-right text-999 margin-left-xs" style="font-size: 24rpx"></text>
          </view>
        </view>
      </view>
      <!-- 优惠end -->
      <!-- 排行榜展示区 -->
      <view class="margin-top-sm bg-white radius-20">
        <view class="list-item" v-if="sale_top_name" @click="goRank">
          <view class="title title-top">
            <text class="fu-iconfont text-top">&#xe74b;</text>
            {{i18n['排行榜']}}
          </view>
          <view class="content solid-bottom">
            <view class="mes text-df text-333 text-cut">{{ sale_top_name }}</view>
            <view class="icon"><text class="cuIcon-right text-333" style="font-size: 24rpx"></text></view>
          </view>
        </view>
      </view>
    </view>
    <!-- 评价展示区start -->
    <view id="evaluates" class="evaluates margin-top-xs bg-white padding-lr">
      <view class="title flex justify-between align-center">
        <text class="title-color">
          <text class="text-lg text-333 text-bold">{{i18n['商品评价']}}</text>
          <text class="text-333 text-df margin-left-xs text-bold">({{ comment_total }})</text>
        </text>
        <text @tap="navToComment">
          <text class="text-sm text-333" v-if="goodsInfo.praise_rate || goodsInfo.praise_rate == 0">{{ i18n['好评率'] + goodsInfo.praise_rate + '%' }}</text>
          <text class="text-sm text-333" v-else>{{i18n['查看全部']}}</text>
          <text class="cuIcon-right text-999 margin-left-xs" style="font-size: 24rpx"></text>
        </text>
      </view>
      <view class="content" v-if="comment.length > 0">
        <block v-for="(item, index) in comment" :key="index"><fu-evaluate :prop="item"></fu-evaluate></block>
      </view>
    </view>
    <!-- 评价展示区end -->
    <!-- 问答展示区 -->
    <view id="evaluates" class="evaluates margin-top-xs bg-white padding-lr questionAnswers-list">
      <view class="title flex justify-between align-center">
        <text class="title-color">
          <text class="text-lg text-333 text-bold">{{i18n['问答']}}</text>
          <text class="text-333 text-df margin-left-xs text-bold">({{ question_total }})</text>
        </text>
        <text @tap="navToQuestionsAnswers">
          <text class="text-sm text-333">{{i18n['查看全部']}}</text>
          <text class="cuIcon-right text-999 margin-left-xs" style="font-size: 24rpx"></text>
        </text>
      </view>
      <view class="content">
        <block v-for="(item, index) in question_list" :key="index">
          <view class="flex justify-between align-center questionAnswers">
            <view class="questionAnswers-left text-cut">
              <image class="image" :src="imgWechatUrl+'/activity/questions.png'" lazy-load="true" />
              <text>{{ item.question_content }}</text>
            </view>
            <view class="questionAnswers-right">{{ item.answer_number }}{{i18n['个回答']}}</view>
          </view>
        </block>
      </view>
    </view>
    <!-- 问答 end -->
    <!-- 商品详情start -->
    <view id="details" class="details radius-20 bg-white margin-top-sm">
      <view class="padding-lr">
        <view class="title flex justify-between align-center">
          <text class="title-color"><text class="text-lg text-333 text-bold">{{i18n['商品详情']}}</text></text>
        </view>
      </view>
      <view class="word-break-all">
        <jyf-parser :html="body"></jyf-parser>
      </view>
    </view>
    <!-- 商品详情end -->
    <!-- 底部菜单start -->
    <view class="tools">
      <view class="toolbar">
        <view class="left">
          <view class="left-item" @tap="navToServer">
            <image class="block-32" :src="imgWechatUrl+'/activity/detail_service_icon.png'" mode="aspectFit"></image>
            <text class="margin-top-xs">{{i18n['客服']}}</text>
          </view>
          <view class="left-item" @tap="navToCart">
            <image class="block-32" :src="imgWechatUrl+'/activity/detail_cart_icon.png'" mode="aspectFit"></image>
            <text class="margin-top-xs">{{i18n['购物车']}}</text>
            <text v-if="parseInt(cartNumber) > 0" class="tag">{{ cartNumber }}</text>
          </view>
          <view class="left-item" @tap="openPopup('share')">
            <image class="block-32" :src="imgWechatUrl+'/activity/detail_cart_icon.png'" mode="aspectFit"></image>
            <text class="margin-top-xs">{{i18n['分享']}}</text>
          </view>
        </view>
        <view class="right">
          <view class="btn btn1" @tap="openPopup('specs', 'cart')"><text class="text-df">{{i18n['加购物车']}}</text></view>
          <view class="btn btn2" @tap="openPopup('specs', 'buy')"><text class="text-df">{{i18n['立即订购']}}</text></view>
        </view>
      </view>
    </view>
    <!-- 底部菜单end -->
    <!-- 优惠券弹窗-->
    <fu-coupon ref="coupon" :info="coupon_list" @changeInfo="changeInfo"></fu-coupon>
    <!-- 地址弹窗 -->
    <fu-goods-address ref="address" :addrs="addrs" @change="changeAddress"></fu-goods-address>
    <!-- 分享弹窗 -->
    <fu-share ref="share" :info="shareInfo" @getPosterInfo="getShareCode"></fu-share>
    <!-- 运费说明弹窗 -->
    <fu-explain :info="freight_explain" :title="i18n['运费说明']" ref="explain"></fu-explain>
    <!-- 规格弹窗 -->
    <fu-specs-popup
      ref="specs"
      :speclist="spec_list"
      :skulist="sku_list"
      :currentId="sku_id"
      :info="goodsInfo"
      :limit="limit"
      :minPrice="minPrice"
      :maxPrice="maxPrice"
      @changeNumber="setNumber"
      @changeSpec="setSpec"
      @addCart="addCart"
      @buyNow="buyNow"
    ></fu-specs-popup>
    <!-- 断网监测 -->
    <fu-notwork></fu-notwork>
  </view>
</template>

<script>
import richText from '@/common/utils/richText.js';
import { SHAREURL } from '@/common/config.js';
import fuSpecsPopup from '../../components/fu-wholesale-specs-popup/fu-wholesale-specs-popup.vue';
import fuCoupon from '../../components/fu-coupon/fu-coupon.vue';
import fuExplain from '../../components/fu-explain/fu-explain.vue';
import fuGoodsAddress from '../../components/fu-goods-address/fu-goods-address.vue';
import fuEvaluate from '../../components/fu-evaluate/fu-evaluate.vue';
export default {
  components: {
    fuSpecsPopup,
    fuCoupon,
    fuExplain,
    fuGoodsAddress,
    fuEvaluate,
  },
  data() {
    return {
			imgWechatUrl:this.imgWechatUrl,
      curSwiper: 1, // 当前轮播图index
      tabs: [
        {
          title: global.i18n['商品'],
          id: 'banners'
        },
        {
          title: global.i18n['评论'],
          id: 'evaluates'
        },
        {
          title: global.i18n['详情'],
          id: 'details'
        }
      ],
      StatusBar: this.StatusBar,
      CustomBar: this.CustomBar,
      curTab: 'banners',
      scrollTop: 0, // {Number} 滚动高度
      opacity: 0, //  {Number} 头部透明度
      swipers: [], // {Array.Object} 轮播图
      goodsInfo: {}, // {Object}商品信息
      spec_list: [], // {Array.Object}规格列表
      sku_list: [], // {Array.Object}规格参照列表
      sku_id: 0, // {String}当前规格id
      sku_name: '', //{String}当前规格名称
      goods_id: 0, //{Number}商品id
      cid: '', // {Number}分类id
      body: '', // {String}商品介绍
      comment: [], //{Array.Object}评论列表
      comment_total: 0, //{Number}评论条数
      question_list: [], // 问答列表
      question_total: 0, // 问答条数
      limit: 0, // {Number}限购数量
      addrs: [], // {Array.Object}地址列表
      curAddr: null, //{String}当前选择的地址
      shareCode: '', //{String}分享的图片路径
      coupon_list: [], //{Array.Object}优惠券列表
      isPlay: false, //{Boolean}是否播放
      videoContext: null, //{Object}视频对象
      freight_explain: '', //{String} 运费说明
      explain_title: '', //{String}运费说明标题
      sale_top_name: '', //排行榜
      minPrice: '0.00', // 最低价
      maxPrice: '0.00' // 最高价
    };
  },
  filters: {
    filterMobile(val) {
      if (!val) return '';
      return val.substr(0, 3) + '****' + val.substr(-4);
    }
  },
  computed: {
    shareInfo() {
      return {
        goods_id: this.goods_id,
        sku_id: this.sku_id,
        goodsName: this.goodsInfo.name,
        goodsImage: this.swipers[0],
        thumb: this.goodsInfo.thumb,
        summary: this.goodsInfo.description,
        price: this.goodsInfo.price,
        market_price: this.goodsInfo.market_price,
        avatar: (global.userInfo && global.userInfo.head_img) || '',
        name: (global.userInfo && global.userInfo.user_name) || '',
        href: SHAREURL + `?goods_id=${this.goods_id}&sku_id=${this.sku_id || 0}&activity_id=${this.activity_id || 0}&type=share`, // H5地址
        code: this.shareCode // 二维码
      };
    },
    cartNumber() {
      return this.$store.getters.allNum;
    }
  },
  onReady: function(res) {
    this.videoContext = uni.createVideoContext('myVideo');
  },
  onLoad(options) {
    const { goods_id, sku_id = 0, scene, type } = options;
    if (scene) {
      const params = decodeURIComponent(options.scene);
      params.split('&').forEach((item, index) => {
        switch (index) {
          case 0:
            id = item.split('=')[1];
            break;
          case 1:
            activity_id = item.split('=')[1];
            break;
          case 2:
            sku_id = item.split('=')[1];
            break;
          case 3:
            invite_code = item.split('=')[1];
            break;
        }
      });
      type = 'share';
    }
    this.goods_id = goods_id;
    this.sku_id = sku_id;
    if (type) {
      this.openModel = 'share';
    }
    this.loadData();
  },

  onUnload() {
    this.clearPolling();
  },
  onShow() {
    if (global.token) {
      this.loadAddress();
    }
    //跑马灯数据
    // this.getLamp();
  },
  onHide() {
    this.clearPolling();
  },
  onPageScroll(e) {
    let top = e.scrollTop;
    let navH = 115 + this.StatusBar;
    this.scrollTop = top;
    this.opacity = (top / 100).toFixed(2);
    if (top >= 0 && top < this.tabs[1].top - navH) {
      this.curTab = 'banners';
    } else if (top >= this.tabs[1].top - navH && top < this.tabs[2].top - navH) {
      this.curTab = 'evaluates';
    } else if (top >= this.tabs[2].top - navH) {
      this.curTab = 'details';
    }
  },
  onShareAppMessage() {
    return {
      title: this.goodsInfo.name,
      path: `/pages/goods/goodsdetail/goods-detail/index?goods_id=${this.goods_id}&sku_id=${this.sku_id}&type=share`,
      imageUrl: this.goodsInfo.thumb
    };
  },
  methods: {
    /**
     * @event
     * @description  改变优惠券领取状态
     * @param {Number} val - 是否领取
     * @return {Boolean}
     * */
    changeInfo(val) {
      this.coupon_list[val].is_receive = 1;
    },
    navToQuestionsAnswers() {
      this.$urouter.navigateTo({
        url: '/pages/goods/ask-answer/ask-answer-list/index',
        params: {
          goods_id: this.goods_id,
          activity_id: this.activity_id || 0
        }
      });
    },
    /**
     * @event
     * @description  播放视频监听
     * */
    playVideo() {
      this.isPlay = true;
      let that = this;
      setTimeout(() => {
        that.videoContext.requestFullScreen(0);
        that.videoContext.play();
      }, 200);
    },
    /**
     * @event
     * @description  视频结束监听
     * */
    videoEnd(e) {
      this.videoContext.exitFullScreen();
      this.isPlay = false;
    },
    /**
     * @event
     * @description  视频全屏监听
     * */
    fullscreenchange(e) {
      console.log(e);
      // 退出全屏时
      if (!e.detail.fullScreen) {
        this.isPlay = false;
        that.videoContext.pause();
      }
    },

    goRank() {
      this.$urouter.navigateTo({
        url: '/pages/rank/product-rank/rank-detail/index',
        params: {
          goods_id: this.goods_id,
          cid: this.cid
        }
      });
    },
    /**
     * @event
     * @description  获取跑马灯数据(暂时用不着)
     * */
    getLamp() {
      this.timer = setInterval(this.polling, 6000);
      clearTimeout(this.outTimer);
    },
    /**
     * @event
     * @description  清除跑马灯轮(暂时用不着)
     * */
    clearPolling() {
      clearInterval(this.timer);
      clearTimeout(this.outTimer);
    },
    polling() {
      this.outTimer = setTimeout(() => {
        this.lampInfo = null;
      }, 3000);
      this.$api
        .post(global.apiUrls.getGoodsLampList, {
          goods_id: this.goods_id
        })
        .then(res => {
          if (res.data.code == 1 && res.data.data) {
            this.lampInfo = res.data.data;
          }
          // console.log('跑马灯数据', res);
        });
    },
    /**
     * @event
     * @description  弹出领取优惠券弹窗
     * */
    switchCoupon() {
      this.$util.actionAuth(() => {
        this.openPopup('coupon');
      });
    },
    /**
     * @event
     * @description  点击图片放大
     * @param {String} item 当前图片url
     * @param {Array} urls 图片url
     */
    preview(item, urls) {
      uni.previewImage({
        current: item,
        urls: urls
      });
    },
    // 返回
    back() {
      if (this.openModel == 'share') {
        uni.reLaunch({
          url: '/pages/tab/home/shopindex/index'
        });
      } else {
        uni.navigateBack();
      }
    },
    // 轮播图切换
    changeSwiper(e) {
      this.curSwiper = e.detail.current + 1;
    },
    /**
     * @event
     * @description 获取收货地址列表
     * @return {Array}
     */
    loadAddress() {
      this.$api.post(global.apiUrls.getUserAddressAddressList).then(res => {
        console.log('地址列表', res);
        if (res.data.code == 1) {
          this.addrs = res.data.data;
        }
      });
    },
    /**
     * @event
     * @description tab栏切换
     * @return {Array}
     */
    changeTab(item) {
      this.curTab = item.id;
      let nowScrollTop = this.scrollTop;
      uni
        .createSelectorQuery()
        .in(this)
        .select('.' + item.id)
        .boundingClientRect(pos => {
          let posTop = pos.top;
          if (posTop == 0 && nowScrollTop != 0) return;
          uni.pageScrollTo({
            duration: 0,
            scrollTop: posTop + nowScrollTop - 100
          });
        })
        .exec();
      // console.log(this.curTab,'changeTab')
    },
    /**
     * @event
     * @description  点击打开弹窗
     * @param {String} type
     * @param {Array} param
     */
    openPopup(type, param) {
      this.$refs[type].open(param);
    },
    /**
     * @event
     * @description  获取商品详情
     * @param {String} goods_id 商品id
     * @param {Array} user_id 用户id
     * @return {Object}
     */
    loadData() {
      this.$api
        .get(global.apiUrls.getGoodsDetail, {
          goods_id: this.goods_id,
          user_id: (global.userInfo && global.userInfo.id) || 0
        })
        .then(res => {
          if (res.data.code == 1) {
            console.log('goods detail', res.data.data);
            let data = res.data.data;
            this.swipers = data.images;
            this.goodsInfo = {
              name: data.name,
              price: data.shop_price,
              market_price: data.market_price,
              discounts: data.discounts || 0.0,
              thumb: data.thumb,
              description: data.description,
              is_collect: data.is_collect,
              share_award_money: data.share_award_money || 0.0,
              number: 0,
              stock: data.stock || 0,
              totalStock: data.stock || 0,
              sales_sum: data.sales_sum,
              is_spec: data.is_spec,
              goods_label: data.goods_label,
              goods_label_activity: data.goods_label_activity,
              goods_label_service: data.goods_label_service,
              praise_rate: data.praise_rate,
              freight_price: data.freight_price,
              member_price: data.member_price,
              shop_price: data.shop_price
            };
            if (data.freight_explain) {
              this.freight_explain = data.freight_explain.replace(/\n/g, '<br/>');
            }
            this.explain_title = data.freight_name;
            this.coupon_list = data.coupon_list;
            this.cid = data.cid;
            this.sale_top_name = data.sale_top_name;
            this.totalStock = data.stock;
            this.limit = data.limit || 0;
            this.body = richText.format(data.body);
            this.comment = data.comment || [];
            this.comment_total = data.comment_total || 0;
            this.question_total = data.question_total || 0;
            this.question_list = data.question_list;
            if (data.is_spec == 1) {
              this.spec_list = data.spec_list.filter(item => item.spec_value.length != 0);
              this.sku_list = Object.values(data.sku_list).map(item => {
                item.sku_spec = item.key.split('_');
                return item;
              });
            }
            if (data.is_wholesale == 1) {
              if (data.is_spec == 0) {
                this.goodsInfo = Object.assign(this.goodsInfo, {
                  batch_data: data.batch_data
                });
                this.maxPrice = data.shop_price;
                this.minPrice = data.batch_data.reduce((price, item) => {
                  if (Number(price) >= Number(item.trade_price)) {
                    return item.trade_price;
                  } else {
                    return price;
                  }
                }, data.shop_price);
              } else {
                let priceObj = this.sku_list.reduce(
                  (obj, item) => {
                    if (Number(item.shop_price) >= Number(obj.shop_price)) {
                      obj.shop_price = item.shop_price;
                    }
                    let min_trade = item.batch_data[item.batch_data.length - 1].trade_price;
                    if (Number(obj.trade_price) == 0) {
                      obj.trade_price = Number(min_trade);
                    }
                    if (Number(min_trade) < Number(obj.trade_price)) {
                      obj.trade_price = Number(min_trade);
                    }
                    item.curPrice = item.shop_price;
                    return obj;
                  },
                  {
                    shop_price: 0,
                    trade_price: 0
                  }
                );

                this.maxPrice = priceObj.shop_price;
                this.minPrice = priceObj.trade_price;
              }
            }
            console.log('goodsInfo', this.goodsInfo);
            uni.stopPullDownRefresh();
            this.$nextTick(() => {
              this.computedPosTop();
              if (data.is_spec == 1) {
                this.$refs.specs.init();
              }
            });
          } else {
            uni.navigateBack();
            setTimeout(() => {
              this.$message.info(this.i18n['获取详情失败']);
            }, 300);
          }
        });
    },
    /**
     * @event
     * @description  计算锚点位置
     */
    computedPosTop() {
      const query = uni.createSelectorQuery().in(this);
      this.tabs.forEach((item, index) => {
        query
          .select('#' + item.id)
          .boundingClientRect(data => {
            this.$set(this.tabs[index], 'top', data.top);
          })
          .exec();
      });
    },
    /**
     * @event
     * @description  收藏
     * @param {String} collect_id 商品id
     * @param {Array} sku_id 规格id
     * @param {Array} collect_title 商品名称
     * @param {Array} type 类型
     * @return {Object}
     */
    collect() {
      this.$util.actionAuth(() => {
        this.$api
          .post(global.apiUrls.postGoodsCollection, {
            collect_id: this.goods_id,
            sku_id: this.sku_id,
            collect_title: this.goodsInfo.name,
            type: 1
          })
          .then(res => {
            if (res.data.code == 1) {
              console.log('collect', res.data);
              if (this.goodsInfo.is_collect) {
                this.goodsInfo.is_collect = 0;
              } else {
                this.goodsInfo.is_collect = 1;
              }
              this.$message.info(res.data.msg);
            }
          });
      });
    },
    /**
     * @event
     * @description  修改购买数量
     * @return {String}
     */
    setNumber(num) {
      this.goodsInfo.number = num;
    },
    /**
     * @event
     * @description  修改购买规格
     * @param {Object} skuInfo
     * @return {Object}
     */
    setSpec(skuInfo) {
      const { key_name, shop_price, market_price, sku_id, stock, member_price } = skuInfo;
      this.sku_id = sku_id;
      this.sku_name = key_name;
      this.goodsInfo.price = shop_price;
      this.goodsInfo.market_price = market_price;
      this.goodsInfo.member_price = member_price;
      this.goodsInfo.stock = stock;
      this.goodsInfo.shop_price = shop_price;
    },
    /**
     * @event
     * @description  立即购买
     * @param {Number} goods_id 商品id
     * @param {String} number 商品数量
     * @param {String} type 类型
     */
    buyNow(e) {
      this.$util.actionAuth(() => {
        let data = {
          goods_id: this.goods_id
        };
        if (Array.isArray(e)) {
          if (e.length == 0) return this.$message.info(this.i18n['至少购买一件']);
          data.sku_ids = JSON.stringify(e);
        } else {
          if (e == 0) return this.$message.info(this.i18n['至少购买一件']);
          data.number = e;
        }
        if (this.curAddr) {
          data.address_id = this.curAddr.address_id;
        }
        this.$urouter.navigateTo({
          url: '/pages/activity/wholesale/confirm-order/index',
          params: data
        });
      });
    },
    /**
     * @event
     * @description  加入购物车
     * @param {Number} goods_id 商品id
     * @param {Number} num 商品数量
     * @return {Object}
     */
    addCart(e) {
      this.$util.actionAuth(() => {
        let data;
        if (Array.isArray(e)) {
          // 多规格商品参数
          data = e.map(item => {
            item.goods_id = this.goods_id;
            return item;
          });
        } else {
          // 无规格商品参数
          data = [
            {
              num: e,
              goods_id: this.goods_id,
              sku_id: 0
            }
          ];
        }
        this.$api.post(global.apiUrls.wholeAddToCart, { cartinfo: JSON.stringify(data) }).then(res => {
          if (res.data.code == 1) {
            this.$message.info(this.i18n['加入购物车成功']);
            this.$store.dispatch('getCartList');
          } else {
            this.$message.info(res.data.msg);
          }
        });
      });
    },
    /**
     * @event
     * @description  选择地址
     */
    switchAddress() {
      this.$util.actionAuth(() => {
        this.openPopup('address');
      });
    },
    /**
     * @event
     * @description  打开运费弹窗
     */
    switchFreight() {
      this.openPopup('explain');
    },
    /**
     * @event
     * @description  去评价列表
     * @param {Number} goods_id 商品id
     */
    navToComment() {
      if (this.comment_total == 0) return this.$message.info(this.i18n['该商品暂无评论']);
      this.$urouter.navigateTo({
        url: '/pages/goods/goodsdetail/goods-comment/index',
        params: {
          goods_id: this.goods_id
        }
      });
    },
    /**
     * @event
     * @description  改变收货地址
     */
    changeAddress(e) {
      this.curAddr = e;
      this.$refs.address.close();
    },
    /**
     * @event
     * @description 去购物车
     */
    navToCart() {
      this.$urouter.switchTab('/pages/tab/cart/cart-page/index');
    },
    /**
     * @event
     * @description  客服
     */
    navToServer() {
      this.$util.actionAuth(() => {
        this.$urouter.navigateTo({
          url: '/pages/service-message/service/service-detail/index',
          params: {
            kid: '1',
            goods_id: this.goods_id,
            activity_id: this.activity_id || 0
          }
        });
      });
    },
    /**
     * @event
     * @description  获取二维码
     * @param {Number} goods_id 商品id
     * @param {Number} activity_id 活动id
     * @param {Number} sku_id 规格id
     */
    getShareCode() {
      // #ifdef MP-WEIXIN
      let data = {
        a: this.goods_id,
        b: this.activity_id || 0,
        c: this.sku_id || 0
      };
      console.log('我分享的参数', data);
      let dataStr = this.$util.serialize(data);
      let page = 'pages/activity/wholesale/wholesale-detail/index';
      this.$api
        .post(global.apiUrls.postShareCode, {
          page: page,
          scene: dataStr,
          width: 180
        })
        .then(res => {
          console.log('分享二维码', res);
          if (res.data.code == 1) {
            let data = res.data.data.base64;
            this.$util
              .base64ToPath(data)
              .then(res => {
                console.log('图片临时路径', res);
                this.shareCode = res;
                this.$refs.share.init();
              })
              .catch(err => {
                console.log('保存临时二维码失败', err);
                this.$message.info(this.i18n['保存临时二维码失败']);
              });
          } else {
            this.$message.info(this.i18n['获取分享二维码失败']);
          }
        })
        .catch(err => {
          console.log('获取分享二维码失败', err);
        });
      // #endif
      // #ifndef MP-WEIXIN
      this.$api
        .post(global.apiUrls.postAppShareCode, {
          goods_id: this.goods_id,
          activity_id: this.activity_id || 0,
          sku_id: this.sku_id || 0
        })
        .then(res => {
          let data = res.data;
          console.log('Appfenxiang ', data);
          if (data.code == 1) {
            let url = data.data.qrcode_url;
            console.log('二维码路径', url);
            this.shareCode = url;
            this.$refs.share.init();
          } else {
            this.$message.info(this.i18n['获取分享二维码失败']);
          }
        })
        .catch(err => {
          console.log(err);
        });
      // #endif
    }
  },
  onPullDownRefresh() {
    this.loadData();
    this.$refs.guess && this.$refs.guess.refresh();

    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  onReachBottom(e) {
    this.$refs.guess && this.$refs.guess.loadData();
  }
};
</script>

<style lang="scss" scoped>
.page {
  min-height: 100%;
  padding-bottom: 100rpx;
  padding-bottom: calc(100rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(100rpx + env(safe-area-inset-bottom));
}

.banners {
  height: 750rpx;
  position: relative;

  .carousel {
    width: 100%;
    height: 100%;

    .image {
      width: 100%;
      height: 100%;
    }

    image {
      width: 100%;
      height: 100%;
    }
  }

  .pagination {
    width: 80rpx;
    height: 40rpx;
    border-radius: 40rpx;
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    right: 32rpx;
    bottom: 32rpx;
    line-height: 40rpx;
    font-size: 28rpx;
    text-align: center;
    color: rgba(255, 255, 255, 0.8);
  }
}

.video-poster {
  height: 100%;
  position: relative;
  font-size: 40rpx;
  color: #ffffff;

  #myVideo {
    width: 750rpx;
    height: 100%;
  }

  .video-poster-circle {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    border: 1rpx solid #ffffff;
    z-index: 99;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;

    .video-poster-mask {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(0, 0, 0, 0.5);
      z-index: -1;
    }
  }
}

.tabs {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88rpx;
  box-shadow: 0 6rpx 4rpx rgba(0, 0, 0, 0.06);
  background-color: #ffffff;
  display: flex;
  z-index: 999;
  .tab-item {
    height: 100%;
    line-height: 88rpx;
    font-size: 28rpx;
    color: #999999;
    border-bottom: 4rpx solid white;
  }

  .tab-item.active {
    color: #333333;
    font-size: 32rpx;
    border-bottom-color: $theme;
  }
}

.prices {
  height: 112rpx;
  background-color: #ffffff;

  .box {
    height: 100%;
    background: url('')
      no-repeat left center;
    background-size: 100% 100%;
    padding: 0 32rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;

    .top {
      line-height: 1;
    }

    .bot {
      display: inline-block;
      height: 32rpx;
      font-size: 20rpx;
      line-height: 32rpx;
      border-radius: 8rpx;
      padding: 0 14rpx;
      background-color: #ffffff;
      margin-top: 10rpx;
      color: $fu-main-color;
    }
  }

  .sale-box {
    position: relative;
  }

  .sale-box::before {
    content: '';
    position: absolute;
    width: 2rpx;
    height: 44rpx;
    display: inline-block;
    background: #ffffff;
    opacity: 0.6;
    left: -32rpx;
    top: -4rpx;
  }
}

.sale-mark {
  padding: 10rpx;
  margin: 0 5rpx;
  height: 32rpx;
  background: rgba(255, 239, 239, 1);
  border-radius: 4px;
  color: $theme;
  font-size: 24rpx;
  text-align: center;
  width: 84rpx;
}

.infos {
  border-radius: 0;
}

.list-item {
  height: 112rpx;
  line-height: 112rpx;
  display: flex;

  .title {
    width: 100rpx;
    min-width: 100rpx;
    font-size: 28rpx;
    color: #333333;
    font-weight: bold;
  }

  .content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    overflow: hidden;

    .mes {
      flex: 1;
    }

    .icon {
      width: 50rpx;
      min-width: 50rpx;
      display: flex;
      justify-content: flex-end;
      align-items: center;
    }

    .coupon-icon {
      width: 30rpx;
      min-width: 30rpx;
    }

    .freight-text {
      text-align: right;
    }
  }
}

.title-color {
  position: relative;
  padding-left: 10rpx;
}

.title-color::before {
  display: inline-block;
  position: absolute;
  content: '';
  height: 30rpx;
  width: 6rpx;
  background: linear-gradient(to bottom, #ff6464 0%, #ffe564 100%);
  left: 20rpx;
  top: 34rpx;
}

.evaluates {
  .title {
    height: 100rpx;

    .title-color::before {
      left: -4rpx;
      top: 10rpx;
    }
  }
}

.shopinfos {
  .title {
    height: 260rpx;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30rpx;
    border-radius: 20rpx 20rpx 0 0;

    .tag {
      padding: 5rpx 10rpx;
      font-size: 16rpx;
      background-color: rgba(255, 0, 0, 0.6);
      border-radius: 100rpx;
      color: #ffffff;
    }

    .tag + .tag {
      margin-left: 10rpx;
    }

    .action {
      width: 160rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      border-radius: 60rpx;
      background-color: rgba(0, 0, 255, 0.3);
      color: #ffffff;
      font-size: 24rpx;
    }
  }

  .recommend {
    .wrap {
      width: 100%;

      .list {
        display: flex;
        align-props: flex-start;

        .goods-item + .goods-item {
          margin-left: 20rpx;
        }
      }
    }
  }
}

.details {
  .title {
    height: 100rpx;
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
    line-height: 100rpx;

    .title-color::before {
      left: -4rpx;
      // top: 10rpx;
    }
  }
}

.tools {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;
  box-shadow: 0px -1px 0px #eeeeee;
  z-index: 999;

  .toolbar {
    height: 100rpx;
    display: flex;

    .left {
      flex: 1;
      padding-left: 60rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left-item {
        display: flex;
        flex-direction: column;
        font-size: 24rpx;
        color: #666;
        align-items: center;
        position: relative;

        .tag {
          position: absolute;
          top: -10rpx;
          right: -18rpx;
          background: $bgtheme;
          width: 36rpx;
          height: 36rpx;
          border-radius: 50%;
          font-size: 20rpx;
          color: #ffffff;
          line-height: 36rpx;
          text-align: center;
        }
      }
    }

    .right {
      width: 448rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0 0 0 60rpx;

      .btn {
        flex: 1;
        height: 108rpx;
        text-align: center;
        color: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        line-height: 1.3;
      }

      .btn1 {
        background-color: #343434;
      }

      .btn2 {
        background: $bgtheme;
      }
    }
  }
}

.block-30 {
  width: 30rpx;
  height: 28rpx;
}

.block-32 {
  width: 42rpx;
  height: 42rpx;
}

.radius-20 {
  border-radius: 20rpx;
}

.block-90 {
  width: 90rpx;
  height: 90rpx;
  min-width: 90rpx;
  min-height: 90rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.block-220 {
  width: 220rpx;
  height: 220rpx;
  min-width: 220rpx;
  min-height: 220rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.text-through {
  text-decoration: line-through;
}

.word-break-all {
  word-break: break-all;
}

.text-999 {
  color: #999999;
}

.item-goods-label {
  background-image: linear-gradient(to right, #ff9700, #ed1c24);
  padding: 2rpx 5rpx;
  color: #ffffff;
  font-size: 24rpx;
  border-radius: 6rpx;
  margin-right: 9rpx;
}

.item-activity-label {
  padding: 2rpx 5rpx;
  /* margin: 5rpx; */
  font-size: 24rpx;
  border-radius: 6rpx;
  border: 1px solid;
  margin: 0rpx 1px 0px;
  display: inline-block;
  transform: scale(0.8);
}

.item-goods-service-label {
  padding: 2rpx;
  margin: 3rpx;
  display: inline-block;
}

.evaluates-service {
  padding: 10rpx 0;
  color: #999999;
}

.service-icon {
  font-size: 24rpx;
  margin-right: 8rpx;
  color: $theme;
  margin-left: 18rpx;
}

.item-goods-service-label:first-child .service-icon {
  margin-left: 0rpx;
}

.lamp {
  color: #fff;
  font-size: 24rpx;
  position: absolute;
  z-index: 9999;
  top: 150rpx;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  margin: 0 10rpx;
  border-radius: 10rpx;
  padding: 2rpx 20rpx;

  image {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    background: #fff;
    margin-right: 10rpx;
  }

  .text {
    margin-right: 10rpx;
  }
}

.title-top {
  width: 140rpx !important;

  .text-top {
    margin-right: 10rpx;
    font-size: 24rpx;
  }
}

.discounts-info {
  color: $theme;
  font-size: 22rpx;
  border-radius: 6rpx;
  padding: 8rpx 16upx;
  background-image: url($IMG_WECHAT_URL+'/activity/detail_coupon_bg.png');
  background-size: 100% 100%;
}

.discounts-info:first-child {
  margin-left: 0;
}

.activity-info {
  color: $theme;
  font-size: 24rpx;
  border-radius: 6rpx;
  padding: 4rpx;
  background: #fce4eb;
}

.questionAnswers {
  padding: 10rpx;
}

.questionAnswers:last-child {
  padding-bottom: 20rpx;
}

.questionAnswers-left {
  font-size: 28rpx;
  color: #333333;
  width: 85%;
}

.questionAnswers-right {
  font-size: 24rpx;
  color: #999999;
}

.questionAnswers-list .image {
  width: 30rpx;
  height: 30rpx;
  margin-right: 10rpx;
}

.share-btn {
  padding-right: 26rpx;
}

.share-btn image {
  width: 34rpx;
  height: 34rpx;
}

.cuIcon-back {
  font-size: 26rpx;
  color: #000;
}
</style>
